<template>
  <div class="container">
    <FortenVxetableStatic :data="valueThis" :columns="tableColumns" :maxHeight="maxHeight" :btnList="btnList" :buttonList="buttonList" @userFun="userFun" pkName="key"
                          :searchFieldArr="['name','title']"
                          searchPlaceholder="搜索字段名/显示名"
                          :defaultSort="cpDefaultSort"
                          :disabled="disabled"
                          ref="vxetableStatic"
    ></FortenVxetableStatic>
  </div>
</template>

<script>
/* eslint-disable*/
import FortenVxetableStatic from '@/components/common/FortenVxetableStatic.vue'
import constCommon from "../../../util/const/constCommon";

//固定数组字典
let dictMap = {
  themeList: [
  ],
  importDataTypeList: [
    { value: 'string', label: '字符串' },
    { value: 'number', label: '数字' },
    { value: 'date', label: '日期' }
  ],
  importDataCheckTypeList: [
    { value: 'require', label: '必须的(不可以为空，同时数字不可以为0)' },
    { value: 'number1', label: '正整数(必须为大于0的整数)' },
    { value: 'number2', label: '正数(必须为大于0的正数)' },
    { value: 'enum1', label: '枚举：0、1、是、否' },
    { value: 'date1', label: '日期(年-月-日)，可以为空' },
    { value: 'date2', label: '日期(年-月-日)，不可以为空' },
    { value: 'date3', label: '日期(年-月-日 时:分:秒)，可以为空' },
    { value: 'date4', label: '日期(年-月-日 时:分:秒)，不可以为空' }
  ],
  actionType: [
    { value: 'get', label: 'get方式' },
    { value: 'post', label: 'post方式' },
  ]
}


export default {
  title:'数据视图维护网格列',
  props:['data', 'type', 'disabled'],
  components: {
    FortenVxetableStatic
  },
  mounted() {
    this.init()
    setTimeout(() => {
      this.$refs.vxetableStatic.sortOut()
    }, 2000)
  },
  computed: {
    cpDisabled() {
      return this.disabled != undefined && this.disabled
    },
    cpDefaultSort() {
      let defaultSort
      //常规配置网格列配置
      if (this.type == 'tableBaseBtn' || this.type == 'tableColumnBtn') {
        defaultSort = {
          field: 'order',
          order: 'asc',
        }
      } else if (this.type == 'formBtn'){ // 表单上部按钮
        defaultSort = {
          field: 'order',
          order: 'asc',
        }
      } else if (this.type == 'tableImportBtn'){ // 导入配置网格列配置
        defaultSort = {
          field: 'sort',
          order: 'asc',
        }
      }
      return defaultSort
    }
  },
  watch: {
    // 监听表单设置本组件的值
    data: {
      immediate: true, // 初始创建 watch 时立即执行回调函数
      deep: true, // 监听到对象里面的值的变化
      handler() {
        this.valueThis = []
        if (this.data && this.data.length > 0) {
          this.valueThis = this.data
        }
      },
    },
    // 监听表单设置本组件的值
    type: {
      immediate: true, // 初始创建 watch 时立即执行回调函数
      deep: true, // 监听到对象里面的值的变化
      handler() {
        if (this.type) {
          console.log('this.type', this.type)
          this.setColumns()
        }
      },
    },
  },
  data() {
    return {
      valueThis: [],
      //字段列表
      tableColumns: [],
      //按钮列表
      btnList: [{
        key: 'delete',
        icon: 'el-icon-delete',
        size: 'mini',
        style: {padding: '6px'},
        type: 'danger',
        title: '移除该列'
      }],
      //按钮列表
      buttonList: [{
        key: 'add',
        icon: 'el-icon-add',
        size: 'mini',
        title: '新增行',
        text: '新增行'
      }],
      maxHeight: window.innerHeight - 450,
    }
  },
  methods: {
    //初始化操作
    init() {
      //数据字典
      dictMap.dictTypeList = this.$store.state.dicts.dictTypeList.map(ob => {
        return {value: ob.code, label: ob.name}
      })


      dictMap.themeList = this.constCommon.themeList
      dictMap.printBusTypeList = this.utils.getDictDataList('print_bus_type')
    },
    //初始化操作
    setColumns() {
      //常规配置网格列配置
      if (this.type == 'tableBaseBtn' || this.type == 'tableColumnBtn') {
        this.tableColumns = [
          {
            field: 'key',
            title: '按钮标识',
            minWidth: 120,
            fixed: 'left',
            titleHelp: '单个配置需要唯一的',
            editRender: {name: 'ElInput', attrs: {type: 'text'}}
          },
          {
            field: 'title',
            title: '按钮文字',
            minWidth: 120,
            fixed: 'left',
            titleHelp: '按钮显示文字',
            editRender: {name: 'ElInput', attrs: {type: 'text'}}
          },
          {
            field: 'type', title: '按钮主题', minWidth: 120, titleHelp: '主题样式',
            editRender: {
              name: 'ElSelect',
              options: constCommon.themeList,
              props: {placeholder: `请选择`, filterable: true, clearable: true}
            }
          },
          {
            field: 'icon',
            title: '按钮图标',
            minWidth: 120,
            titleHelp: '图标显示',
            editRender: {name: 'ElInput', attrs: {type: 'text'}}
          },
          {
            field: 'order',
            title: '显示顺序',
            minWidth: 120,
            titleHelp: '按钮显示顺序，目前内置按钮最小顺序为-100【查询】按钮',
            editRender: {name: 'ElInputNumber', attrs: {min: -1000, max: 999}}
          },
          {
            field: 'flagPrint',
            title: '打印按钮',
            minWidth: 120,
            titleHelp: '勾选后，该按钮为打印按钮，需要配置打印打印类型',
            editRender: {name: 'ElSwitch'},
            formatter: 'formatSwitch',
          },
          {
            field: 'printBusType', title: '打印类型', minWidth: 120, titleHelp: '',
            editRender: {
              name: 'ElSelect',
              options: dictMap.printBusTypeList,
              props: {placeholder: `请选择`, filterable: true, clearable: true}
            }
          },
          {
            field: 'showCondition',
            title: '显示条件',
            minWidth: 200,
            titleHelp: '例如：data.status == 1',
            editRender: {name: 'ElInput', attrs: {type: 'text'}}
          },
        ]
      } else if (this.type == 'formBtn'){ // 表单上部按钮
        this.tableColumns = [
          {
            field: 'key',
            title: '按钮标识',
            width: 120,
            fixed: 'left',
            titleHelp: '单个配置需要唯一的',
            editRender: {name: 'ElInput', attrs: {type: 'text'}}
          },
          {
            field: 'title',
            title: '按钮文字',
            width: 120,
            fixed: 'left',
            titleHelp: '按钮显示文字',
            editRender: {name: 'ElInput', attrs: {type: 'text'}}
          },
          {
            field: 'type', title: '按钮主题', minWidth: 120, titleHelp: '主题样式',
            width: 120,
            editRender: {
              name: 'ElSelect',
              options: constCommon.themeList,
              props: {placeholder: `请选择`, filterable: true, clearable: true}
            }
          },
          {
            field: 'icon',
            title: '按钮图标',
            width: 120,
            titleHelp: '图标显示',
            editRender: {name: 'ElInput', attrs: {type: 'text'}}
          },
          {
            field: 'order',
            title: '显示顺序',
            width: 120,
            titleHelp: '按钮显示顺序',
            editRender: {name: 'ElInputNumber', attrs: {min: 0, max: 999}}
          },
          {
            field: 'showCondition',
            title: '显示条件',
            width: 300,
            titleHelp: '例如：data.status == 1,data 表单对象，cpFormReadonly: 是否只读',
            editRender: {name: 'ElInput', attrs: {type: 'text'}}
          },
          {
            field: 'actionType', title: '请求方式', minWidth: 120, titleHelp: '请求方式',
            width: 120,
            editRender: {
              name: 'ElSelect',
              options: dictMap.actionType,
              props: {placeholder: `请选择`, filterable: true, clearable: true}
            }
          },
          {
            field: 'actionAddr',
            title: '请求地址',
            width: 300,
            titleHelp: '例如：get方式: /test/{id} /test?id={id}',
            editRender: {name: 'ElInput', attrs: {type: 'text'}}
          },
          {
            field: 'actionTitle',
            title: '操作提示',
            width: 120,
            editRender: {name: 'ElInput', attrs: {type: 'text'}}
          },

          {
            field: 'actionWithMsg',
            title: '需要确认信息',
            minWidth: 100,
            editRender: {name: 'ElSwitch'},
            formatter: 'formatSwitch',
            titleHelp: '是否需要用户输入信息框，如果指定了这一项，则不再提示确认框'
          },

          {
            field: 'actionWithMsgDialogTitle',
            title: '确认弹框标题',
            minWidth: 200,
            editRender: {name: 'ElInput', attrs: {type: 'text'}},
            titleHelp: '确认弹框标题，不指定则为 请输入'
          },
          {
            field: 'actionMsgField',
            title: '用户信息字段',
            width: 200,
            editRender: {name: 'ElInput', attrs: {type: 'text'}},
            titleHelp: '用户信息提交使用的字段名称,不指定则默认为remark'
          },
        ]
      } else if (this.type == 'tableImportBtn'){ // 导入配置网格列配置
        this.tableColumns = [
          {field: 'key', title: '字段标志', minWidth: 120, fixed: 'left', titleHelp: '字段标志', editRender: {name: 'ElInput', attrs: {type: 'text'}}},
          {field: 'name', title: '字段名', minWidth: 120, fixed: 'left', titleHelp: '字段名称', editRender: {name: 'ElInput', attrs: {type: 'text'}}},
          {
            field: 'title',
            title: '显示名',
            minWidth: 120,
            editRender: {name: 'ElInput', attrs: {type: 'text'}},
            fixed: 'left'
          },
          {
            field: 'importDataType',
            title: '导入数据类型',
            minWidth: 140,
            editRender: {
              name: 'ElSelect',
              options: dictMap.importDataTypeList,
              props: {placeholder: `请选择`, filterable: true, clearable: true}
            },
          },
          {
            field: 'dict',
            title: '字典类型',
            minWidth: 140,
            editRender: {
              name: 'ElSelect',
              options: dictMap.dictTypeList,
              props: {placeholder: `请选择`, filterable: true, clearable: true}
            },
            titleHelp: '下拉框等类型时需要指定数据字典',
            filter: true
          },

          {
            field: 'sort',
            title: '显示顺序',
            minWidth: 100,
            editRender: {name: 'ElInputNumber', attrs: {min: 0, max: 999}},
          },
          {
            field: 'importDataCheckType',
            title: '导入数据校验',
            minWidth: 140,
            editRender: {
              name: 'ElSelect',
              options: dictMap.importDataCheckTypeList,
              props: {placeholder: `请选择`, filterable: true, clearable: true}
            },
            titleHelp: '下拉框等类型时需要指定数据字典',
            filter: true
          }
        ]
      }
    },

    //将所有为空的置为0
    set0IfNull(toNum) {
      if (isNaN(toNum)) toNum = 0
      this.$confirm('确定将所有为空的字段排序值置为'+toNum+'么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.data.forEach(column => {
          if (!column.sort || this.strings.isBlank(column.sort)) this.$set(column,'sort',toNum)
        })
      }).catch(() => {
      });
    },

    //将所有置为0
    set999All(col) {
      this.$confirm('确定将所有字段排序值置为999么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.data.forEach(column => {
          this.$set(column, 'sort', 999)
        })
      }).catch(() => {
      });
    },

    //回调函数
    userFun({config, scope}) {
      switch (config.key) {
        case 'rule': //设置验证规则
          this.handleRuleWindowOpen(scope)
          break
        case 'add': //增加行
          this.valueThis.unshift({ id: global.utils.randomCode(8), key: '', title: '', type: 'primary', icon: '', order: 0, sort: 0  })
          break

        case 'set0IfNull': //将所有为空的排序置为0
          this.set0IfNull()
          break
        case 'set999All': //将所有排序置为0
          this.set999All()
          break
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .container{
    height: auto !important;
  }
</style>
